<template>
  <div class="home-wrapper">
    <div class="item-box">
      <div class="item-grid" :class="{active: item.isEnabled}" v-for="(item) of items" :key="item.path" @click="handleGridClick(item)">
        <img :src="item.img">
        <div class="item-content">
          <div class="item-state" :class="{active: item.isEnabled}"></div>
          <span class="item-name">{{item.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      items: [
        {
          name: '线下展示区',
          img: require('@media/home/item-0@2x.png'),
          path: 'exhibition',
          isEnabled: true
        },
        {
          name: '创新成果集市',
          img: require('@media/home/item-1@2x.png'),
          path: '/',
          isEnabled: false
        },
        {
          name: '活动筹备',
          img: require('@media/home/item-2@2x.png'),
          path: '/',
          isEnabled: false
        },
        {
          name: '数据库',
          img: require('@media/home/item-3@2x.png'),
          path: '/',
          isEnabled: false
        },
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleGridClick(item) {
      this.$router.push({name: item.path})
    },
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
@import "@/style/scss/home.scss"
</style>
